﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfAddRouteDatail.aspx.cs" Inherits="msBsc.WebUi.ShpMana.wfAddRouteDatail" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>添加景点</title>
    <link href="/themes/wStyle1/css/sLayout.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sHead.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sFoot.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/usermenu.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/from.css" rel="stylesheet" />
    <link href="/jqPlugin/hdfu/hdfu.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/pagination.css" rel="stylesheet" />

    <link href="/themes/wStyle1/css/Seller/sReleaseForum.css" rel="stylesheet" />
    <link href="/jqPlugin/kindeditor/themes/default/default.css" type="text/css" rel="stylesheet" />
    <link href="/jqPlugin/layer/skin/layer.css" rel="stylesheet" />
     
    
    <style type="text/css">
        .sceiclsit {
            width: 100px;
            height: 140px;
            float: left;
            margin-left: 15px;
        }

            .sceiclsit img {
                max-width: 100px;
                max-height: 80px;
            }

        .secicInfo {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .selCondition li {
            background-color: #f5f5f5;
            border: 1px solid #f5f5f5;
            float: left;
            line-height: 20px;
            margin-right: 5px;
            margin-top: 3px;
            padding: 4px 10px;
        }

        .cancel {
            cursor: pointer;
            padding-left: 5px;
        }
    </style>
</head>
<body>
    <div class="wf_all">
        <div class="main-container">
            <div class="main-Info" style="margin-bottom: 200px;">
                <div class="main-horizontal">
                    <div class="r_row">
                        <span class="control-span">路线名称</span>
                        <div class="controls">
                            <p id="routeName" style="font-size: 20px; font-family: inherit; color: #808080;">路线名称路线名称路线名称</p>
                        </div>
                    </div>
                    <div class="r_row">
                        <span class="control-span">线路日程<span class="required">*</span></span>
                        <div class="controls">
                            <select id="days" style="width: 140px;">
                                <option value="0">请选择</option>
                            </select>
                            <span id="day" class="help-inline">第几天</span>
                        </div>
                    </div>
                    <div class="r_row">
                        <span class="control-span">景点添加<span class="required">*</span></span>
                        <div class="controls">
                            景点名称:<input type="text" id="scenic" />&nbsp;&nbsp;&nbsp;
                                <select class="selArea" id="selCountry">
                                    <option value="">请选择</option>
                                    <option value="DF6723BE-A25C-4F77-BB49-A1662D3E6F2A">中国</option>
                                    <option value="453370FE-8295-41EC-A41C-B6F650AD1B4C">亚洲</option>
                                    <option value="927D5F28-C4FB-46A9-940C-B07DF0A04018">北美洲</option>
                                    <option value="1FEAF456-7C76-41C8-A3D0-F9C12415A736">南美洲</option>
                                    <option value="4E2B4524-E9CB-4E20-9224-E58EB636D1C7">非洲</option>
                                    <option value="67FA6A8D-951C-4B53-AE1E-70DCB97E11DE">欧洲</option>
                                    <option value="0B772F3D-D8F8-42E3-9019-81FE6F772236">大洋洲</option>
                                </select>
                            <select class="selArea" id="selCity">
                                <option value="">请选择</option>
                            </select>
                            <xmp id="country_city_list" style="display: none">
                                <option value="">请选择</option>
                                {{#for(var i=0,len=d.rows.length;i < len;i++){ }}
                                       <option value="{{d.rows[i].COUNTRY_CITY_ID}}">{{d.rows[i].COUNTRY_CITY_NME}}</option>
                                {{#} }}        
                            </xmp>
                            <select class="selArea" id="selDestination">
                                <option value="">请选择</option>
                            </select>
                            <xmp id="city_des_list" style="display: none">
                               <option value="">请选择</option>
                               {{#for(var i=0,len=d.rows.length;i < len;i++){ }}
                                <option value="{{d.rows[i].COUNTRY_CITY_ID}}">{{d.rows[i].COUNTRY_CITY_NME}}</option>
                               {{#} }}
                            </xmp>
                            &nbsp;&nbsp;
                                <input type="button" onclick="selectDatailInfo(1)" value="查询" />
                            <input type="button" onclick="saveSceinic();" class="releaseBtn" style="margin-left: 40px;" value="发布" />
                        </div>
                    </div>
                    <div class="r_row">
                        <div class="controls">
                            <div class="divMaxCondition">
                                <ul class="selCondition" id="scenicView">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="r_row" id="sceic_view_list"></div>
                    <xmp id="sceicList" style="display: none">
                             {{#for(var i=0,len=d.rows.length;i < len;i++){ }}
                                <div class="sceiclsit">
                                    <img src="{{d.rows[i].SCENIC_DEFAULT_PIC}}" alt="{{d.rows[i].SCENIC_NAME}}" />
                                    <p class="secicInfo"><a href="/wp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}" title="{{d.rows[i].SCENIC_NAME}}">{{d.rows[i].SCENIC_NAME}}</a></p>
                                    <p><input type="button" sceicid="{{d.rows[i].SCENIC_ID}}" onclick="addScenic(this);" value="添加" /></p>
                                </div>
                             {{#} }}
                    </xmp>
                    <div class="jpage" id="divPage"></div>
                </div>
            </div>
        </div>
    </div>
    <!--start JS引用-->
    <script src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
    <script src="/jqPlugin/js/jBase.js"></script>
    <script src="/jqPlugin/js/jBPage.js"></script>
    <script src="/jqPlugin/js/laytpl.js"></script>
    <script src="/jqPlugin/layer/layer.min.js"></script>

    <script src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
    <script src="/jqPlugin/SelectSimu/js/SelectSimu.js"></script>
    <script src="/themes/wStyle1/js/comm/jsLayout.js"></script>
    <script src="/themes/wStyle1/js/comm/jsPagination.js"></script>

    <script charset="utf-8" src="/jqPlugin/kindeditor/kindeditor.js"></script>
    <script charset="utf-8" src="/jqPlugin/kindeditor/lang/zh_CN.js"></script>
    <!--end JS引用-->
    <script type="text/javascript">
        var pageIndex = 0;
        var scenicList = [];
        var isAdd = false;
        function SetAreaInfo() {
            $("#selCountry").change(function () {
                $("#selCity").html("<option value=''>请选择</option>");
                $("#selDestination").html("<option value=''>请选择</option>");
                var _opartParam = new jsonRow();
                _opartParam.AddCell("countryId", $("#selCountry").val());
                _opartParam.AddCell("cityId", $("#selCity").val());
                _opartParam.AddCell("ACTION", "changeArea");
                ajaxComm(_opartParam);
            })

            $("#selCity").change(function () {
                $("#selDestination").html("<option value=''>请选择</option>");
                var _opartParam = new jsonRow();
                _opartParam.AddCell("cityId", $("#selCity").val());
                _opartParam.AddCell("ACTION", "changeArea");
                ajaxComm(_opartParam);
            })

            var opartParam = new jsonRow();
            opartParam.AddCell("routeid", GetQueryStr("routeid"));
            opartParam.AddCell("ACTION", "lodingRout");
            ajaxComm(opartParam);
        }
        //加载 
        function setRoutInfo(name, das) {
            $("#routeName").html(name);
            var html = "";
            for (var i = 0; i < parseInt(das) ; i++) {
                html += "<option value=" + (i + 1) + ">" + (i + 1) + "天</option>";
            }
            $("#days").append(html);
        }

        //保存数据
        function saveSceinic() {
            var day = $("#days").find("option:checked").val();
            if (scenicList.length < 1) { layer.alert('至少选择一个景点.', 3); return; }

            if (day < 1) { layer.alert('请选择第几天.', 3); return; }

            if ($("#routeName").html() == "") { layer.alert('路线名称不存在.', 3); return; }

            var scenicids = "";
            $(scenicList).each(function (i, e) { scenicids += e + ","; });

            var opartParam = new jsonRow();
            opartParam.AddCell("routeid", GetQueryStr("routeid"));
            opartParam.AddCell("routName", $("#routeName").html());
            opartParam.AddCell("detailids", scenicids);
            opartParam.AddCell("day", day);
            opartParam.AddCell("ACTION", "saveRoute");
            ajaxComm(opartParam);
        }

        //获取 旅游路线列表
        function selectDatailInfo(index) {
            pageIndex = index;
            var scenic = $("#scenic").val();
            var countryId = $("#selCountry").val();
            var cityId = $("#selCity").val();
            var destinationId = $("#selDestination").val();

            var opartParam = new jsonRow();
            opartParam.AddCell("scenic", scenic);

            opartParam.AddCell("countryId", countryId);
            opartParam.AddCell("cityId", cityId);
            opartParam.AddCell("destinationId", destinationId);
            opartParam.AddCell("pageIndex", pageIndex);

            opartParam.AddCell("ACTION", "selectDatail");
            ajaxComm(opartParam);
        }
        //加载 景区模版
        function roadHtml(countryJson, sumCount, pRows, pIndex) {
            var _html = $('#sceicList').html();
            laytpl(_html).render(countryJson, function (render) {
                $('#sceic_view_list').html(render);
            });

            jsPage('divPage', sumCount, pRows, pIndex, 'selectDatailInfo');
        }
        //景区删除
        function scenicDel(t) {
            var sceicid = $(t).attr("sceicid");
            $(scenicList).each(function (i, e) {
                if (e == sceicid) {
                    scenicList.splice(i, 1);
                    return false;
                }
            });
            $(t).parent().remove();
        }
        //景区添加
        function addScenic(t) {
            var sceicid = $(t).attr("sceicid");
            $(scenicList).each(function (i, e) {
                if (e == sceicid) { isAdd = true; return false; }
            });

            if (isAdd) {
                layer.tips('该景点已经添加过了', $("#sceic_view_list"), { guide: 0, time: 5 });
                return;
            }

            var accunt = $(t).parent().prev().find('a').html();
            var html = '<li ><span class="condition-text">' + accunt + '</span><span sceicid="' + sceicid + '" onclick="scenicDel(this)" class="cancel">X</span></li>';
            $("#scenicView").append(html);

            scenicList.push(sceicid);
            $(t).parent().parent().remove();
        }
        //成功
        function success() {
            layer.alert('添加成功',1);
            $("#sceic_view_list").html("");
            $("#scenicView").html("");
        }
        SetAreaInfo();
    </script>
</body>
</html>
